<template>
  <van-tabbar
    v-model="active"
    active-color="#ff5f16"
    inactive-color="#797d82"
    @change="onChange"
  >
    <van-tabbar-item>
      <span class="iconfont icon-dianyingpiaoiocn" slot="icon"></span>
      电影
    </van-tabbar-item>
    <van-tabbar-item>
      <span class="iconfont icon-yingyuan" slot="icon"></span>
      影院
    </van-tabbar-item>
    <van-tabbar-item>
      <span class="iconfont icon-zixun" slot="icon"></span>
      资讯
    </van-tabbar-item>
    <van-tabbar-item>
      <span class="iconfont icon-shouye" slot="icon"></span>
      我的
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)
export default {
  created() {
    console.log(this.$route.path)
    let path = this.$route.path
    let index = this.urlArr.indexOf(path)
    if (index < 0 && path === '/movie/future') {
      index = 0
    }
    this.active = index
  },
  data() {
    return {
      active: 0,
      urlArr: ['/movie/playing', '/cinema', '/news', '/my']
    }
  },
  methods: {
    onChange(index) {
      this.$router.push(this.urlArr[index])
    }
  }
}
</script>
<style>
</style>
